<template>
	<view v-if="parttimeData">
		<view class="box" @click="emitgoDetail">
			<!-- 职名 -->
			<view class="title">{{ parttimeData.title }}&nbsp;{{ parttimeData.shop }}</view>
			<!-- 待遇 -->
			<view class="welfare">
				<text class="welfare-item" v-for="(item2, index2) in parttimeData.welfare" :key="index2">{{ item2 }}</text>
			</view>
			<!-- 店信息 -->
			<view class="company">
				<!-- 图像 -->
				<view class="lf">
					<image :src="parttimeData.img" mode="widthFix"></image>
				</view>
				<view class="rg">
					<!-- 店名 -->
					<view class="cname">{{ parttimeData.cname }}</view>
					<!-- 位置 -->
					<view class="pos">
						<text class="pos-item" v-for="(item3, index3) in parttimeData.position" :key="index3">{{ item3 }}</text>
					</view>
				</view>
			</view>
			<!-- 工资 -->
			<view class="salary">
				{{ parttimeData.salary }}
				<text>/小时</text>
			</view>
			<!-- 取消申请职位按钮 -->
			<button @click.stop="delItem" v-show="delDeliver" class="delbtn"  hover-class="is-hover" hover-stay-time="300">取消申请职位</button>
		</view>
	</view>
</template>

<script>
export default {
	props: ['parttimeData', 'delDeliver'],
	name: 'parttimeList',
	data() {
		return {};
	},
	methods: {
		emitgoDetail() {
			this.$emit('parttimeDetail', this.parttimeData);
		},
		delItem() {
			this.$emit('delParttimeItem', this.parttimeData);
		}
	}
};
</script>

<style lang="scss" scoped>
.box {
	position: relative;
	padding: 30rpx;
	box-shadow: 0 0 10rpx #9a9a9a;
	margin: 0 34rpx;
	box-sizing: border-box;
	border-radius: 14rpx;
	margin-bottom: 50rpx;

	.title {
		font-size: 36rpx;
		font-weight: 700;
	}
	.welfare {
		margin: 20rpx 0 36rpx;
		display: flex;
		.welfare-item {
			background-color: #cecece;
			font-size: 24rpx;
			padding: 6rpx 10rpx;
			border-radius: 12rpx;
			margin-right: 18rpx;
			&:last-child {
				margin-right: 0;
			}
		}
	}

	.company {
		display: flex;
		font-size: 30rpx;
		.lf {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			overflow: hidden;
		}
		.rg {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 20rpx;
			.pos {
				display: flex;
				.pos-item {
					margin-right: 10rpx;
					&:last-child {
						margin-right: 0;
					}
				}
			}
		}
	}
	.salary {
		position: absolute;
		right: 34rpx;
		top: 130rpx;
		font-size: 42rpx;
		color: #e60909;
		text {
			font-size: 30rpx;
		}
	}
}
.delbtn {
	// #2979ff
	background-color: grey;
	width: 80%;
	font-size: 30rpx;
	margin: 40rpx auto 0;
	text-align: center;
	color: white;
}
.is-hover{
	background-color: #00DCB6;
}

</style>
